<script  setup>
import { onMounted, ref, defineProps, defineEmits } from 'vue'
import { useFunctionTreeStore } from '@/stores/functionTree'
const functionTreeStore = useFunctionTreeStore()

// 接收父组件传递的数据
const props = defineProps({
  f2List: {
    type: Array,
    default: () => []
  }
})


//传递组件名称给父组件控制显示内容
const emit = defineEmits(['cname'])
const selecedFunction1 = ref('0-0')
const activeNames = ref(JSON.parse(sessionStorage.getItem('activeNames')) || [])

const setActive = (fname, index, index1) => {
  sessionStorage.setItem('selectedFunction1', index + '-' + index1)
  selecedFunction1.value = index + '-' + index1
  //将内容组件名称参数传递给父组件
  emit('cname', fname)
  sessionStorage.setItem('selectedFunction1Name',fname)
}


// 监听折叠面板的展开和关闭事件
const handleChange1 = (names) => {
  activeNames.value = names
  sessionStorage.setItem('activeNames', JSON.stringify(names))
}


onMounted(() => {
  //默认内容
  if(props.f2List){
    console.log("f2List存在的！")
  }
  const selectedVal = sessionStorage.getItem('selectedFunction1')
  if (selectedVal !== null) {
    selecedFunction1.value = selectedVal
    const fname= sessionStorage.getItem('selectedFunction1Name')
    emit('cname', fname)
  }

  const savedActiveNames = JSON.parse(sessionStorage.getItem('activeNames'))  
  if (savedActiveNames !== null) {
    activeNames.value = savedActiveNames
  }
})
</script>

<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange1(activeNames)">
      <template v-for="(item, index) in props.f2List">
        <template v-if="item.children!==null && item.children.length>0">
          <el-collapse-item :title="'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp' + item.name" :name="item.name" :key="item.id"
            class="center-title">
            <div class="menu-item" :class="{ 'seleced1': index + '-' + index1 === selecedFunction1 }" v-for="(child, index1) in item.children" :key="index" @click="setActive(child.fname, index, index1)">
              {{ child.name }}
            </div>
          </el-collapse-item>
        </template>
        <template v-else>
          <div class="menu-item" :class="{ 'seleced1': index + '-' + 0 === selecedFunction1 }" @click="setActive(item.fname, index, 0)">
            {{ item.name }}
          </div>
        </template>
      </template>
    </el-collapse>
  </div>
</template>
<style scoped>
.demo-collapse {
  width: 150px;
  height: 100vw;
  position: fixed;
  top: 100px;
  left: -20px;

}

.menu-item {

  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid rgba(199, 52, 52, 0.05); */

}

/* 根据需要自定义鼠标移入和选中时的样式 */
.menu-item:hover {
  background-color: #FFCCCC;
  color: #f50b0b;
  font-size: 16px;
}

.menu-item:active {
  background-color: #FFCCCC;
  color: #f50b0b;
  font-size: 16px;
}

.seleced1 {
  /* background-color: rgba(228, 238, 90); */
  color: #f50b0b;
  /* font-size: 16px; */
  border-right: 2px solid #f50b0b;
}

/* .el-collapse-item__header {
  font-size: 20px;
  font-weight: 500;
  
} */

.center-title {
  text-align: center;

}
</style>不用折叠面板了，用垂直导航菜单